<script setup>
  import { ref, computed, onMounted, onUnmounted } from 'vue'
  import { GlobalOutlined, UserOutlined, TagsOutlined, NumberOutlined } from "@ant-design/icons-vue";
  import { validateMobile, validateNull } from "@/utils/validate.js";
  import {editUserInfoApi} from "@/api/index.js";
  import { message } from "ant-design-vue";
  const emit = defineEmits(["updateUserInfo"]);
  const baseUrl = computed(() => import.meta.env.VITE_BASE_URL + 'system/basic/postUploadOne')
  const visible = ref(false)
  const innerWidth = ref(0)
  const formRef = ref();
  const formData = ref({
    avatar: '',
    name: '',
    // mobile: '',
    desc: '',
    remark: '',
    company_info: '',
  });
  const rules = {
    mobile: [{ validator: validateMobile, trigger: 'blur' }],
    name: [{ validator: validateNull, trigger: 'blur' }],
  };
  const open = (params) => {
    if (params) {
      formData.value = {
        avatar: params.avatar,
        name: params.name,
        desc: params.desc,
        remark: params.remark,
        company_info: params.company_info,
      }
    }
    visible.value = true
  }
  const close = () => {
    visible.value = false
  }
  const confirm = () => {
    formRef.value.validate().then(() => {
      editUserInfoApi({...formData.value}).then(() => {
        close()
        emit('updateUserInfo')
        message.success('修改成功')
      }).catch((err) => {
        message.error(err.msg)
      })
    }).catch((err) => {
    })
  }
  const change = (e) => {
    const { file } = e
    if (file.status === 'done') {
      if (file.response.code === 1) {
        formData.value.avatar = file.response.path
      } else {
        message.error(file.response.info)
      }
    }
  }
  // 获取页面宽度
  const getInnerWidth = () => {
    innerWidth.value = window.innerWidth
  }
  onMounted(() => {
    innerWidth.value = window.innerWidth
    window.addEventListener('resize', getInnerWidth)
  })
  onUnmounted(() => {
    window.removeEventListener('resize', getInnerWidth)
  })
  defineExpose({
    open,
    close
  })
</script>

<template>
  <a-modal
      v-model:open="visible"
      title="修改信息"
      :width="innerWidth>750?'500px':'100%'"
      :footer="null"
      wrap-class-name="full-width"
      style="max-width: 100%;z-index: 9999"
      :style="{top: innerWidth>750?'':'0', paddingBottom: innerWidth>750?'':'0'}"
  >
    <div class="edit-info">
      <a-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          labelAlign="right"
      >
        <a-form-item name="avatar" label="头像">
          <a-upload
            accept=".png,.jpg,.jpeg,.webp"
            name="img"
            list-type="picture-card"
            :show-upload-list="false"
            :action="baseUrl"
            @change="change"
          >
            <img :src="formData.avatar" alt="">
          </a-upload>
        </a-form-item>
        <a-form-item name="name" label="用户昵称">
          <a-input v-model:value="formData.name" autocomplete="off" placeholder="请输入账号">
            <template #prefix> <UserOutlined /> </template>
          </a-input>
        </a-form-item>
        <a-form-item name="company_info" label="公司信息">
          <a-input v-model:value="formData.company_info" autocomplete="off" placeholder="请输入公司昵称">
            <template #prefix> <GlobalOutlined /> </template>
          </a-input>
        </a-form-item>
        <a-form-item name="desc" label="描述信息">
          <a-input v-model:value="formData.desc" autocomplete="off" placeholder="请输入描述信息">
            <template #prefix> <NumberOutlined /> </template>
          </a-input>
        </a-form-item>
        <a-form-item name="remark" label="备注信息">
          <a-input v-model:value="formData.remark" autocomplete="off" placeholder="请输入备注信息">
            <template #prefix> <TagsOutlined /> </template>
          </a-input>
        </a-form-item>
      </a-form>
      <div class="btn-box">
        <a-button type="primary" style="background: var(--primary);" @click="confirm"> 提交 </a-button>
      </div>
    </div>
  </a-modal>
</template>

<style scoped lang="scss">
.edit-info {
  :deep(.ant-form-item-label) {
    width: 80px;
  }
  .ant-input-affix-wrapper {
    border-radius: 0;
  }
  :deep(.ant-upload) {
    border-radius: 50% !important;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .btn-box {
    display: flex;
    justify-content: center;
    .ant-btn {
      width: 250px;
    }
  }
}
@media (max-width: 750px) {
  .edit-info {
    height: calc(100vh - 75px);
  }
}
</style>